<template>
  <!-- enter-active-class="animate__slideInDown" -->
  <!-- leave-active-class="animate__fadeOut" -->
  <transition name="animate__animated animate__bounce">
    <div
      class="menu-bar"
      :style="{ width: viviWidth }"
      v-show="viviVisible"
      @click="onClick($event)"
    >
      <slot>
        <div
          v-for="(m, i) in bar"
          :key="i"
          :data-index="i + 1"
          class="menu-bar-item"
          :style="{ height: viviHeight, 'line-height': viviHeight }"
        >
          {{ m }}
        </div>
      </slot>
    </div>
  </transition>
</template>

<script>
// import "animate.css";
export default {
  name: "PersonMenuBar",
  props: {
    related: {
      type: String,
      required: true,
    },

    visible: {
      type: Boolean,
    },

    bar: {
      default: () => ["账号管理", "退出"],
    },

    width: {
      type: String,
      default: "9%",
    },
  },

  data() {
    return {
      viviVisible: false,
    };
  },

  computed: {
    viviWidth() {
      return typeof this.width === "number" ? `${this.width}px` : this.width;
    },
  },

  mounted() {
    this.$elTarget = document.querySelector("." + this.related);

    if (this.$elTarget) {
      // const { left, bottom } = this.$elTarget.getBoundingClientRect();

      // this.$el.style.left = `${left}px`;
      // this.$el.style.top = `${bottom}px`;

      window.addEventListener("", this.handleSizeChange);

      this.$elTarget.addEventListener("pointerenter", this.handleHoverTarget);
      this.$elTarget.addEventListener("pointerleave", this.handleLeaveTarget);

      this.$el.addEventListener("pointerenter", () => (this.viviVisible = true));
      this.$el.addEventListener("pointerleave", () => (this.viviVisible = false));
    }
  },

  methods: {
    onClick(event) {
      const target = event.target.nodeName === "I" ? event.target.parentElement : event.target;
      const [{ index, text }] = this.$children.filter((item) => item.$el === target);
      this.$emit("click", index, text, target);
    },

    handleHoverTarget(event) {
      this.viviVisible = true;
      const { left, bottom } = this.$elTarget.getBoundingClientRect();
      this.$el.style.left = `${left}px`;
      this.$el.style.top = `${bottom}px`;
    },

    handleLeaveTarget(event) {
      this.viviVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.menu-bar {
  z-index: 1000;
  box-sizing: border-box;
  padding: 0 15px;
  position: fixed;
  background-color: #282c34;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
